<template>
    <div>
      <div >
        <ul class="local_nav">
          <router-link to="strategy">
            <li>
            <a id="c_lbs_guide" data-cid="lbsguide" title="攻略·景点"
               href="" >
              <span class="icon-local-scenic"></span>
              <span>攻略·景点</span>
            </a>
          </li>
          </router-link>
          

          <li>
            <a id="c_lbs_ticket" data-cid="lbsguide" title="门票·玩乐"
               href="">
              <span class="icon-local-around"></span>
              <span>门票·玩乐</span>
            </a>
          </li>

          <li>
            <a id="c_food" data-cid="lbsguide" title="美食林"
               href="">
              <span class="icon-local-food"></span>
              <span>美食林</span>
            </a>
          </li>

          <li>
            <a id="c_weekend" data-cid="lbsguide" title="周边游"
               href="">
              <span class="icon-local-oneday"></span>
              <span>周边游</span>
            </a>
          </li>
         <router-link to="oneday">
          <li>
            <a id="c_oneday" data-cid="lbsguide" title="一日游"
               href="">
              <span class="icon-local-strategy"></span>
              <span>一日游</span>
            </a>
          </li>
          </router-link>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Local"
    }
</script>

<style scoped>
 .local_nav{
   display: flex;
   background: #fff;
   border-radius: 8px;
   margin: -52px 12px 10px;
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
   padding: 4px 0 8px;
   z-index: 11;
   box-shadow: 0 2px 6px rgba(0,0,0,.08);
 }
 li {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 a{
   text-decoration:none;
   font-size: .75rem;
   color: #222;
   display: flex;
   flex-direction: column;
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
   line-height: 1;
   position: relative;
 }
 .icon-local-scenic {
   background-position: 0 0;
 }
 .icon-local-around {
   background-position: 0 -40px;
 }
 .icon-local-food {
   background-position: 0 -80px;
 }
.icon-local-oneday {
   background-position: 0 -120px;
 }
 .icon-local-strategy {
   background-position: 0 -160px;
 }
 [class^=icon-local-] {
   width: 40px;
   height: 40px;
   border-radius: 100%;
   background-image: url(https://pic.c-ctrip.com/platform/h5/home/home-fivemain-sprite2x@v7.15.png);
   background-repeat: no-repeat;
   background-size: 40px auto;
   display: block;
 }
</style>
